<template>
  <view class="pop">
    <view class="title">全部分类</view>
    <view class="typeBox flex flex-row wrap">
      <view class="type" v-for="(item,index) in typeList"  @click="setCategory(index)">
        <view><image class="img" :src="item.imageUrl" /></view>
        <view :class="{'nameBox':currentIndex === index}" class="name flex a-item j-content">{{ item.name }}</view>
      </view>
      <view class="type" @click="search">
        <view><image class="img" src="http://121.41.75.32:8002/file/static/search01.png" /></view>
        <view  class="name flex a-item j-content">搜索</view>
      </view>
    </view>
  </view>
</template>

<script>
import jPopup from "../../components/jPopup";
export default {
  name: "categoryBox",
  components:{jPopup},
  props:{
    typeList:{
      type:Array,
      default:()=>[]
    }
  },
  data(){
    return{
      currentIndex: 0
    }
  },
  methods:{
    search(){
      this.$emit('search')
    },
    setCategory(index){
      this.$emit('setCategory',index)
    }
  }


}
</script>

<style lang="scss" scoped>
.pop{
  position: fixed;
  background: white;
  width: 100%;
  z-index: 999;
  max-height: 800rpx;
  overflow-y: auto;
  padding: 20rpx 10rpx 50rpx 10rpx;
  border-radius: 20rpx;
  margin-top: 270rpx;
  .title{
    font-size: 33rpx;
  }
}
.type{
  margin-left: 40rpx;
  margin-top: 30rpx;
  width: 140rpx;
  image{
    width: 100rpx;
    height: 100rpx;
    margin: auto;
  }
  .name{
    margin-top: 5rpx;
    font-size: 33rpx;
  }
}
</style>
